<template>
  <div>
    <div class="detailContent-tab">
      <ul>
        <router-link v-for="item in list" :to="{path:item.path}" tag="li" active-class="active" :key="item.id">
          {{item.name}}
        </router-link>
      </ul>
    </div>
    <keep-alive>
      <router-view></router-view>
    </keep-alive>
  </div>
</template>

<script>
export default {
  name: 'detail-content',
  data () {
    return {
      list: [
        {
          name: '评论',
          path: '/detail/comment',
          active: true
        },
        {
          name: '点赞',
          path: '/detail/like',
          active: false
        }
      ]
    }
  }
}
</script>

<style scoped>
.detailContent-tab{display: flex;align-items: center;background-color: #fff;height: 50px;padding: 2% 7%;border-bottom: 1px #efefef solid;}
.detailContent-tab > ul{display: flex;width: 100%;}
.detailContent-tab > ul > li{display: flex;margin-right: 7%; padding: 3% 0;}
.detailContent-tab > ul > .active{border-bottom: 3px #333 solid;}
</style>
